//
// Location popup
// ------------------------------

.popup-location {
  .box-shadow(0 0 6px rgba(0,0,0,.4));
  background-color: #d4d4d4;
  border-radius: 3px;
  position: absolute;
  padding:10px 15px 15px;
  left: 50%;
  width: 380px;
  margin: -60px 0 0 -190px;
  bottom: 25px;

  &.__reduce {
    margin-left: -175px;
    padding: 7px;
    width: 355px;
    height: 50px;
    .search-with-catalog {
      width: 320px;
      margin: 0;
      input {
        height: 34px;
        padding-left: 5px;
      }
    }
    .search-with-catalog_catalog,
    .popup-location_text,
    .selector-city{
      display: none;
    }
    .search-with-catalog_icon{
      top: 6px;
      right: 6px;
    }

    .popup-location_reduce {
      background-position: 1px bottom;
    }
    .popup-location_search {
      .btn {
        &.search{
        height: 32px;
      }
        &.express {
          display: none;
        }
      }
    }
    .input-group-btn {
      xdisplay: none;
    }    
    .search_query {
      width:240px;
    }
  }

  @media (min-width: @screen-md-min) {
    width: 460px;    
    margin-left: -220px;   
  }
}
.popup-location_text {
  color: #818181;
  margin-bottom: 10px;
  padding-right: 10px;
}

.down-icon {
  width:125px;
  height:150px;
  background: url(images/down-icon.png) no-repeat 0 0 transparent;
  position:fixed;
  left:150px;
  bottom:10px;
  display:none;
  z-index:1000;
}
.down-icon span {
  display:block;
  text-align:center;
  color:#fff;
  margin-top: 77px;
  line-height: 1;  
}

.popup-location_reduce {
  background: url(images/reduce_btn.png) no-repeat 1px top #bebebe;
  cursor: pointer;
  height: 16px;
  width: 18px;
  position: absolute;
  top: 4px;
  right: 4px;
}
.popup-location_search {
  .search_query {
    float: left;
    margin-bottom: 10px;
    margin-right: 3px;
    width: 275px;
  }
  .input-group-btn {
    display: inline-block;
    margin-top: 1px;
    .btn {
      height: 36px;
      &.express{
        display: none;
      }
    }
  }
 
  @media (min-width: @screen-md-min) {
    .search_query {
      margin-bottom: 0;
      width: 250px;
    }
    .input-group-btn .btn.express {
      display: inline-block;
    }
  }
}

//
// Selector city
// ------------------------------

.selector-city {
  position: relative;
}

.selector-city_target {
  background: url(images/location_icon.png) no-repeat 0 3px transparent;
  cursor: pointer;
  display: inline-block;
  padding-left: 20px;
}
.selector-city_panel {
  .box-shadow(0 0 6px rgba(0,0,0,.4));
  background-color: #e5e5e5;
  position: absolute;
  display: none;
  top: 20px;
  left: 0;
  padding: 18px;
  width: 290px;  
  z-index:1;

  &:after{
    background: url(images/location_icon_medium.png) no-repeat 0 0px transparent;
    content: "";
    height: 23px;
    width: 18px;
    position: absolute;
    top: 26px;
    right: 26px;
  }

  @media (min-width: @screen-sm-min) {
    width: 430px;
  }

  input{
    .form-control;
    border: none;
    font-size: 22px;
    height: 40px;
    padding: 6px 32px 6px 12px;
  }

  ul {
    .box-shadow(0 0 3px rgba(0,0,0,.2));
    background-color: #fff;
    display: none;
    font-size: 16px;
    max-height: 80px;
    list-style: none;
    margin: 0;
    overflow-y: auto;
    padding: 0;
    li {
      cursor: default;
      padding: 2px 10px;
      &:hover {
        background-color: #f2f2f2;
      }
    }
  }
}
